<template>
    <div class="app">
        <div class="header">
            <div class="centered-text">
                购物车
            </div>
            <button class="address">+添加收货地址</button>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'carHeader',
    data() {
        return {

        };
    }
    //注册组件
}
</script>
  
<style scoped >
/* 头部样式开始 */
.header {
    background-color: rgb(235, 24, 67);
    height: 100px;
    position: relative;
}

.centered-text {
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
}
.address{
    background-color: rgb(249, 249, 232);
    position: absolute; /* 绝对定位，相对于最近的相对定位的父元素定位 */
    right: 10px; /* 距离父元素右边距10像素 */
    bottom: 10px; /* 距离父元素底部边距10像素 */
    border: 1px solid black;
}

/* 头部样式结束 */
</style>